<template>
  <div class="friend-modal">
    <div class="friend-tabs">
      <button 
        class="tab-btn"
        :class="{ active: activeTab === 'list' }"
        @click="activeTab = 'list'"
      >
        好友列表
      </button>
      <button 
        class="tab-btn"
        :class="{ active: activeTab === 'add' }"
        @click="activeTab = 'add'"
      >
        添加好友
      </button>
    </div>
    
    <!-- 好友列表 -->
    <div v-if="activeTab === 'list'" class="friend-list">
      <div v-if="loading" class="loading">
        <text>加载中...</text>
      </div>
      <div v-else-if="friends.length === 0" class="empty">
        <text>暂无好友</text>
      </div>
      <div v-else>
        <div 
          v-for="friend in friends" 
          :key="friend.id || friend.user_id"
          class="friend-item"
        >
          <div class="friend-avatar">
            <div class="avatar-text">{{ (friend.name || '友').charAt(0) }}</div>
            <div 
              v-if="friend.status === 'online'"
              class="online-badge"
            ></div>
          </div>
          <div class="friend-info">
            <div class="friend-name">{{ friend.name || '未知' }}</div>
            <div class="friend-level">Lv.{{ friend.level || 1 }}</div>
          </div>
          <div class="friend-actions">
            <button 
              class="delete-btn"
              @click="deleteFriend(friend)"
              :disabled="deleting"
            >
              删除
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 添加好友 -->
    <div v-if="activeTab === 'add'" class="add-friend">
      <div class="add-form">
        <input 
          v-model="friendIdInput"
          class="input-field"
          type="text"
          placeholder="请输入好友ID或用户名"
        />
        <button 
          class="add-btn"
          @click="addFriend"
          :disabled="adding || !friendIdInput"
        >
          {{ adding ? '添加中...' : '添加好友' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/api'

export default {
  name: 'FriendModal',
  data() {
    return {
      activeTab: 'list',
      friends: [],
      loading: true,
      deleting: false,
      adding: false,
      friendIdInput: ''
    }
  },
  mounted() {
    this.loadFriends()
  },
  methods: {
    async loadFriends() {
      this.loading = true
      try {
        // TODO: 根据实际后端接口调整
        const response = await api.post('/system/friend/list', {})
        if (response && response.code === 1) {
          this.friends = Array.isArray(response.data) ? response.data : []
        } else {
          // 如果没有好友接口，使用空数组
          this.friends = []
        }
      } catch (error) {
        console.error('加载好友列表失败:', error)
        this.friends = []
      } finally {
        this.loading = false
      }
    },
    
    async addFriend() {
      if (this.adding || !this.friendIdInput.trim()) return
      
      this.adding = true
      try {
        const response = await api.post('/system/friend/add', {
          friend_id: this.friendIdInput.trim()
        })
        if (response && response.code === 1) {
          uni.showToast({ title: '添加成功', icon: 'success' })
          this.friendIdInput = ''
          this.activeTab = 'list'
          this.loadFriends()
        } else {
          uni.showToast({ title: response?.msg || '添加失败', icon: 'none' })
        }
      } catch (error) {
        console.error('添加好友失败:', error)
        uni.showToast({ title: '网络错误', icon: 'none' })
      } finally {
        this.adding = false
      }
    },
    
    async deleteFriend(friend) {
      if (this.deleting) return
      
      const confirmed = await new Promise(resolve => {
        uni.showModal({
          title: '确认删除',
          content: `确定要删除好友 ${friend.name || '未知'} 吗？`,
          success: (res) => resolve(res.confirm),
          fail: () => resolve(false)
        })
      })
      
      if (!confirmed) return
      
      this.deleting = true
      try {
        const response = await api.post('/system/friend/delete', {
          friend_id: friend.id || friend.user_id
        })
        if (response && response.code === 1) {
          uni.showToast({ title: '删除成功', icon: 'success' })
          this.loadFriends()
        } else {
          uni.showToast({ title: response?.msg || '删除失败', icon: 'none' })
        }
      } catch (error) {
        console.error('删除好友失败:', error)
        uni.showToast({ title: '网络错误', icon: 'none' })
      } finally {
        this.deleting = false
      }
    }
  }
}
</script>

<style scoped>
.friend-modal {
  max-height: 60vh;
}

.friend-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  border-bottom: 2px solid #f0f0f0;
}

.tab-btn {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-btn.active {
  color: #667eea;
  border-bottom-color: #667eea;
  font-weight: bold;
}

.friend-list, .add-friend {
  max-height: 50vh;
  overflow-y: auto;
}

.loading, .empty {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.friend-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 10px;
}

.friend-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.avatar-text {
  color: white;
  font-size: 16px;
  font-weight: bold;
}

.online-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #52c41a;
  border: 2px solid white;
}

.friend-info {
  flex: 1;
}

.friend-name {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.friend-level {
  font-size: 12px;
  color: #666;
}

.friend-actions {
  display: flex;
  gap: 8px;
}

.delete-btn {
  padding: 6px 12px;
  background: #ff4757;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.delete-btn:hover:not(:disabled) {
  background: #ff3838;
  transform: translateY(-1px);
}

.delete-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.add-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.input-field {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
}

.input-field:focus {
  outline: none;
  border-color: #667eea;
}

.add-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>

